<template>
    <van-nav-bar title="我的订单" left-arrow @click-left="onClickLeft" :fixed="true" />
    <div class="vannavbar"></div>
    <div class="myorder">
        <van-tabs v-model:active="stateSize" sticky @change="tabsChange">
            <van-tab v-for="item in tabsList" :title="item.label" :name="item.value">
                <div class="myorder_list">
                    <div class="myorder_int" v-for="items in OrderList" :key="items.ID">
                        <div class="img"> <img :src="items.Picture" alt=""> </div>
                        <div class="ul">
                            <li>订单ID：{{ items.ID }}</li>
                            <!-- <li>产品ID ：{{ items.ProductId }}</li> -->
                            <li>商品名称：{{ items.ProductName }}</li>
                            <li>支付积分：{{ items.PayAmount }}</li>
                            <li v-if="items.Status == 1">创建时间：{{ items.CreateTime }}</li>
                            <li v-if="items.Status == 2">配送时间 ：{{ items.FeliveryTime }}</li>
                            <li v-if="items.Status == 3">收货时间 ：{{ items.DeliveryTime }}</li>
                            <li v-if="items.Status == 4">评价时间 ：{{ items.EvaluationTime }}</li>
                        </div>
                    </div>
                </div>
            </van-tab>
        </van-tabs>
    </div>
</template>

<script>
import { onMounted, reactive, ref, toRefs } from 'vue'
import { Toast, Notify } from 'vant';
import { useStore } from "vuex"; // ⚪️ 引入状态管理
import { useRoute, useRouter } from "vue-router";
import { GetOrderList, GetOrderDetail } from "@/network/myorder";
import router from "@/router";
import {
    getToken,
    setToken,
    removeToken
} from "@/utils/auth";
export default {
    setup() {
        const store = useStore(); // 获取对象
        const route = useRoute();
        const { type } = route.query;
        const state = reactive({
            token: store.state.user.token,
            type: type,
            stateSize: 1,
            tabsList: [
                // {
                //     label: '待付款',
                //     value: 0
                // },
                {
                    label: '待发货',
                    value: 1
                },
                {
                    label: '待收货',
                    value: 2
                },
                {
                    label: '评价',
                    value: 3
                },
                {
                    label: '退款售后',
                    value: 4
                }
            ],
            OrderList: [],

        });
        onMounted(() => {
            state.stateSize = parseInt(state.type);
            console.log(state.stateSize);
            init();
        });
        // 初始化信息
        const init = () => {
            const toast = Toast.loading({
                duration: 0,
                forbidClick: true,
                message: '列表获取中...',
            });
            var params = {
                memberId: state.token.ID,
                state: state.stateSize,
                pageSize: state.pageSize,
                currentPage: state.currentPage
            }
            // 获取订单列表
            GetOrderList(params).then((res) => {
                toast.clear()
                if (res.Code == 0) {
                    var data = res.Data;
                    state.Total = res.Pager.Total
                    state.OrderList = data
                } else { }
            });
        };
        const tabsChange = (res) => {
            init();
        }
        const goWithdrawal = () => {
            router.push({
                path: "/withdrawal",
                query: {
                    date: new Date().getTime()
                }
            });
        }
        const onRefresh = () => {
            init()
            state.isLoading = false
        }
        const onClickLeft = () => {
            router.push({ path: "/my" });
        };
        return {
            ...toRefs(state),
            tabsChange,
            goWithdrawal,
            onRefresh,
            onClickLeft
        };
    },
};
</script>

<style scoped></style>